<template>

	<tui-list-cell :hover="false" :arrow="theOptions.readonly?false:true">
		<view class="input_line">
			<view class="input_title">
				<text v-show="theRules&&theRules[0]&&theRules[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="input_content">
				<number-box class="input_number" @change="changeVal" :value="theOptions.defaultValue" :placeholder="theOptions.placeholder"
				 :min="theOptions.min" :max="theOptions.max" :step="theOptions.step" :disabled="theOptions.disabled" :iconSize="theOptions.iconSize"
				 :iconColor="theOptions.iconColor" :size="theOptions.size" :width="theOptions.width" :height="theOptions.height"
				 :bgcolor="theOptions.bgcolor"></number-box>
			</view>
		</view>
	</tui-list-cell>

</template>

<script>
	import numberBox from '../../thor-com/numberbox/numberbox.vue'

	export default {
		name: 'kmlc-input-number',
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object
			},
			options: {
				type: Object
			},
			rules: {
				type: Array
			}
		},
		components: {
			numberBox,
		},
		data() {
			return {
				theOptions: {},
				// inputValue: '',
				theRules: [],
			}
		},
		watch: {
			emData: function(val) {
				// console.log('重置数字输入框：')
				this.theOptions = val.options; //重置数据
			},
		},
		created() {
			if (this.emData && this.emData.options) {
				if (this.emData.rules) {
					this.theRules = this.emData.rules
				};
				this.theOptions = this.emData.options;
			} else {
				this.theOptions = this.options;
			}
			// this.inputValue = this.theOptions.defaultValue;
		},
		methods: {
			changeVal(e) {
				if (this.theOptions.disabled) {
					return;
				};
				this.theOptions.defaultValue = e.value;
				this.$emit('onChangeVal', {
					value: e.value
				});
			},
		}
	}
</script>

<style>
	.isrequire{
		color: #d41200;
	}
	
	.input_line {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.input_title {
		min-width: 150upx;
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.input_content {
		width: 100%;
		background: #FFFFFF;
		padding: 12upx 0upx;
		box-sizing: border-box;
	}
</style>
